<template>
    <a-table :pagination="pagination" :columns="columns" :dataSource="HzDataSource">

        <!--搜索部分-->
        <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
        >
            <a-input
                    v-ant-ref="c => searchInput = c"
                    :placeholder="`Search ${column.dataIndex}`"
                    :value="selectedKeys[0]"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @pressEnter="() => handleSearch(selectedKeys, confirm)"
                    style="width: 188px; margin-bottom: 8px; display: block;"
            />
            <a-button
                    type="primary"
                    @click="() => handleSearch(selectedKeys, confirm)"
                    icon="search"
                    size="small"
                    style="width: 90px; margin-right: 8px"
            >Search
            </a-button
            >
            <a-button
                    @click="() => handleReset(clearFilters)"
                    size="small"
                    style="width: 90px"
            >Reset
            </a-button
            >
        </div>
        <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
                v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
                  v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                  :key="i"
                  class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
            <template v-else>{{ text }}</template>
        </template>


        <!--里面放该帖子的内容展示，不展示评论，操作放在下面的div的右下角-->
        <div slot="expandedRowRender" slot-scope="record">
            <div style="display: flex;margin-bottom: 10px;">
                <div style="margin: 5px;font-weight: 600">货主基本数据：</div>
                <div style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
                    货主差评数：{{ record.hzCpNum }}
                </div>
                <div style="margin-left: 10px;background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
                    货主好评数：{{ record.hzHpNum }}
                </div>
                <div style="margin-left: 10px;background-color: yellow;padding: 5px 8px;border-radius: 5px;border:1px solid #8b8b8b">
                    货主发货数：{{ record.hzHwNum }}
                </div>
            </div>
            <div style="display: flex;margin-bottom: 10px;">
                <div style="margin: 5px;font-weight: 600">货主认证情况：</div>
                <div
                        v-if="record.hzUser.userSmrz===1"
                        style="background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
                    已完成实名认证
                </div>
                <div
                        v-if="record.hzUser.userSmrz===0"
                        style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
                    未完成实名认证
                </div>
                <div
                        v-if="record.hzUser.userClrz===1"
                        style="background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b;margin-left: 10px;">
                    已完成车辆认证
                </div>
                <div
                        v-if="record.hzUser.userClrz===0"
                        style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b;margin-left: 10px;">
                    未完成车辆认证
                </div>
            </div>
            <div style="position: relative;right: 0">
                <a-button type="primary" @click="toSeeThisSj(record.hzUser.userId)">查看用户&nbsp; {{ record.hzUser.userNc }}
                    &nbsp;全部信息
                </a-button>
            </div>
        </div>

        <!--状态的选择部分-->
        <a-dropdown slot="score" slot-scope="text,score">
            <a class="ant-dropdown-link" v-if="score.hzUser.userZt===0">正常
                <a-icon type="down"/>
            </a>
            <a class="ant-dropdown-link" v-if="score.hzUser.userZt===1">删除
                <a-icon type="down"/>
            </a>
            <a class="ant-dropdown-link" v-if="score.hzUser.userZt===2">禁用
                <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
                <a-menu-item>
                    <a href="javascript:" @click="toUpdateZt('zc',score.key)">正常</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:" @click="toUpdateZt('sc',score.key)">删除</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:" @click="toUpdateZt('jy',score.key)">禁用</a>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
    </a-table>
</template>

<script>
    import {putAction,getAction} from '@/api/manage'

      export default {
        name: "HzTable",
        components: {},
        props: ["HzDataSource"],
        mixins: [],
        data() {
            return {
                searchText: '',
                searchInput: null,
                columns: [
                    {
                        title: '序号', dataIndex: 'key', width: 60,
                    },
                    {
                        title: '货主昵称', dataIndex: 'hzUser.userNc', key: 'hzUser.userNc', width: 100,
                        //查找
                        scopedSlots: {
                            filterDropdown: 'filterDropdown',
                            filterIcon: 'filterIcon',
                            customRender: 'customRender'
                        },
                        onFilter: (value, record) => record.hzUser.userNc.toString().toLowerCase().includes(value.toLowerCase()),
                        onFilterDropdownVisibleChange: visible => {
                            if (visible) {
                                setTimeout(() => {
                                    this.searchInput.focus()
                                }, 0)
                            }
                        }
                    },
                    {
                        title: '货主真名', dataIndex: 'hzUser.userXm', key: 'hzUser.userXm', width: 100,
                        //查找
                        scopedSlots: {
                            filterDropdown: 'filterDropdown',
                            filterIcon: 'filterIcon',
                            customRender: 'customRender'
                        },
                        onFilter: (value, record) => record.hzUser.userXm.toString().toLowerCase().includes(value.toLowerCase()),
                        onFilterDropdownVisibleChange: visible => {
                            if (visible) {
                                setTimeout(() => {
                                    this.searchInput.focus()
                                })
                            }
                        }
                    },
                    {
                        title: '注册日期',
                        dataIndex: 'hzUser.userZcrqsj',
                        key: 'hzUser.userZcrqsj',
                        width: 100,
                        //排序
                        sorter: (a, b) => a.hzUser.userZcrqsj - b.hzUser.userZcrqsj
                    },
                    {
                        title: '状态',
                        key: 'score',
                        width: 100,
                        scopedSlots: {customRender: 'score'}
                    }
                ],
                pagination: {
                    showQuickJumper: true,
                    defaultPageSize: 10,
                    showSizeChanger: true,
                    // pageSizeOptions: [10, 15, 30, 50, 80, 100, 150, 200],
                    style: {
                        marginRight: '15px'
                    }
                },
                url: {
                    putOneUserZt: "/my/sjInfo/putOneUserZt"
                }
            }
        },
        created() {
        },
        methods: {
            //表格的查找方法
            handleSearch(selectedKeys, confirm) {
                confirm();
                this.searchText = selectedKeys[0]
            },
            handleReset(clearFilters) {
                clearFilters();
                this.searchText = ''
            },
            onChange(pageNumber) {
                console.log('Page: ', pageNumber)
            },
            //修改状态
            toUpdateZt(ztXx, key) {
                var zt = 0;
                var userId = this.SjDataSource[key - 1].hzUser.userId;
                switch (ztXx) {
                    case "zc":
                        zt = 0;
                        break;
                    case "sc":
                        zt = 1;
                        break;
                    case "jy":
                        zt = 2;
                        break;
                    default:
                }
                var info = {userId: userId, zt: zt};
                putAction(this.url.putOneUserZt, info).then((res) => {
                    if (res.success) {
                        this.$message.success('用户状态修改成功！', 3);
                        this.SjDataSource[key - 1].hzUser.userZt = zt;
                    }
                })
              var hzId = "123";
              getAction("/getOneHzInfo", hzId).then((res) => {
                if (res.success) {
                 console.log(res.result)
                }
              })
              getAction("/getOneHzInfo", hzId).then((res) => {
                if (res.success) {
                  console.log(res.result)
                }
              })
            },
            //当触发一个情况时，thisIndex+12，然后再触发loadTentyTwoData
            //跳转到当前这个货主的页面
            toSeeThisSj(userId) {//点击跳转函数
                console.log(userId);
                this.$router.push({
                    path: "/single/HzShow",//跳转路由
                    query: {
                        thisUserId: userId
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>